<template>
	<view class="content">
		<view v-if="detail.activityOrderNo||detail.memberId">

			<view class="formBox">
				<view class="f-c-fs item" v-for="(item,key,index) in detail"
					v-if="key!='verificationGoods'&&key!='verificationType'" :key="index">
					<view class="label">{{ key | appData(key) }}：</view>
					<view class="value">{{item?item:'--'}}</view>
				</view>

			</view>

			<view v-if="detail.verificationGoods&&detail.verificationGoods.length!=0" class="formBox">
				<view class="title">核销商品/项目</view>
				<checkbox-group @click="checkboxChange">
					<view class="item" v-for="(item, index) in detail.verificationGoods" :key="item.serviceNo">
						<!-- <view class="label">核销类型：</view> -->
						<view class="info">
							<view class="f-c-sb">
								<view class="left f-c-sb">
									<view class="name">{{ item.serviceName }}</view>
									<view class="num">剩余：{{item.remainingNumber-item.num}}</view>
								</view>
								<view class="right f-c-fs">
									<checkbox :value="item.serviceName" :data-index="index" :checked="item.checkbox"
										style="margin-left: 20rpx;" />
									<!-- <u-checkbox @change="checkboxChange" :name="item.shoppingServiceName" v-model="item.checkbox" style="margin-left: 20rpx;"></u-checkbox> -->
									<u-number-box v-model="item.num" @change="valChange" :min="item.checkbox ? 1 : 0"
										:disabled="!item.checkbox" :max="item.remainingNumber" :bg-color="'#DBDBDB'">
								</view>
							</view>
							<!-- <view class="prcie">价值：￥{{ item.price }}</view> -->
						</view>
					</view>
				</checkbox-group>
			</view>
			<view class="lxdBtn" @click="verification">确认核销</view>
		</view>
		<u-modal v-model="alterShow" :title="alterText.title" :content="alterText.text"
			:show-cancel-button="alterText.showCancelButton" @confirm="confirm(alterText.type)"></u-modal>
	</view>
</template>

<script>
	import {
		writeoffDetail,
		writeoffWriteOff
	} from '@/api/marketingB-helper.js';
	let defaultData = {
		activityOrderNo: "活动订单编号",
		activityName: "活动名称",
		purchaseQuantity: "购买数量",
		payTime: "支付时间",
		payAmount: "支付金额",
		verificationTypeStr: "核销类型",
		activityTime: "活动时间",
		groupStartTime: "组团开始时间",
		groupEndTime: "组团结束使时间",
		groupPeople: "组团人数",
		prize: "奖品",
		memberId: "优惠券编号",
		winningTime: "中奖时间",
		couponName: "优惠券名称",
		couponInfo: "优惠券信息",
		validTime: "优惠券有效期"
	}
	export default {

		filters: {
			appData(val, key) {
				return defaultData[key]
			}
		},
		data() {
			return {
				value: 0,
				alterShow: false,
				alterIndex: 3,
				alterText: {
					title: '温馨提示',
					text: '确认核销？',
					showCancelButton: true,
					type: 1
				},
				orderNo: '',
				detail: {}
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		onLoad(option) {
			this.orderNo = JSON.parse(option.param).orderNo
			// this.orderNo = 'MS_AO202206011054532931';
		},
		onShow() {
			this.writeoff();
		},
		methods: {
			confirm(type) {
				if (type == 1) {
					this.verification()
				} else if (type == 2 || type == 3) {
					uni.navigateBack({
						delta: 1
					})
				} else if (type == 4) {

				}
			},
			valChange(e) {
				console.log(e);
				this.detail.verificationGoods.forEach((item, index) => {
					if (e.index == index) {
						item.num = e.value;
						this.$forceUpdate();
					}
				})

			},
			checkboxChange: function(e, ) {
				console.log(e)
				var items = this.detail.verificationGoods,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (i == e.target.dataset.index) {
						this.$set(item, 'checkbox', !item.checkbox)
						this.$set(item, 'num', item.checkbox ? 1 : 0)
						console.log(item)
						this.$forceUpdate()
					}

				}
			},
			verification() {
				var detail = this.detail
				var data = {
					orderNo: this.orderNo,
					activityType: detail.verificationType,
					storesName: this.userInfo.storeName,
					storeBasicId: this.userInfo.storeId,
					name: detail.activityName || detail.couponName
				};
				let orderServerListDtos = [];
				if (data.verificationType != 6) {
					if (detail.verificationGoods && detail.verificationGoods.length != 0) {
						detail.verificationGoods.forEach((val, index) => {
							if (val.checkbox) {
								var data = {
									number: val.num,
									orderNo: val.orderNo,
									price: val.price,
									serviceNo: val.serviceNo,
									shoppingServiceName: val.shoppingServiceName
								}

								orderServerListDtos.push(data)
							}

						})
					}
					data.orderServerListDtos = orderServerListDtos

					if (data.orderServerListDtos.length == 0 && detail.verificationGoods && detail.verificationGoods
						.length !=
						0) {
						uni.showToast({
							title: '请选择核销商品',
							icon: 'none'
						})
						return;
					}

				}
				writeoffWriteOff(data).then(res => {
					if (res.code != 200) {
						this.alterShow = true;
						this.alterText.text = res.msg;
						this.alterText.type = 3;
						this.alterText.showCancelButton = false
					} else {
						this.alterShow = true;
						this.alterText.text = '核销成功';
						this.alterText.type = 2;

						this.alterText.showCancelButton = false
					}
				})

			},
			writeoff() {
				var data = {
					orderNo: this.orderNo,
					storeBasicId: this.userInfo.storeId
				};
				writeoffDetail(data).then(res => {
					setTimeout(this.back, 1500);
					this.detail = res.data;
					if (this.detail.verificationGoods && this.detail.verificationGoods.length != 0) {
						this.detail.verificationGoods.forEach((val, index) => {
							this.detail.verificationGoods[index].checkbox = false;
							this.detail.verificationGoods[index].num = 0;
						});
					}
				}).catch(err => {
					setTimeout(this.back, 1500)
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		background: #f5f5f5;
		padding: 22rpx 0;
		box-sizing: border-box;

		.formBox {
			padding: 22rpx;

			.item {
				margin: 15rpx 0;
			}

			.info {
				margin-bottom: 29rpx;

				.left {
					width: 400rpx;
					font-size: 26rpx;
					font-weight: 700;
					color: #333333;

					.name {
						width: 280rpx;
					}

					.num {
						width: 120rpx;
						font-weight: 400;
					}
				}

				.prcie {
					font-size: 22rpx;
					color: #333333;
				}
			}
		}
	}

	.formBox .item .label {
		min-width: 130rpx;
	}
</style>
